<template>
  <div class="page-con">
    <div>
      <TbTitle level="2" :title="`（一）、` + detailInfo.examineYear + `年度举办公益慈善活动情况`" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否开展活动：
        <el-radio-group v-model="radio1" disabled>
          <el-radio-button label="1">已开展</el-radio-button>
          <el-radio-button label="2">未开展</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.publicWelfareList"
        border>
        <el-table-column type="index" align="center" width="70" label="序号"></el-table-column>
        <el-table-column prop="activityName" align="center" label="公益慈善活动名称"> </el-table-column>
        <el-table-column prop="address" align="center" label="实施地域"> </el-table-column>
        <el-table-column prop="g2" align="center" label="起止时间">
          <template #default="scope">
            {{ scope.row.startTime }}-{{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceMode" align="center" label="主要服务方式" width="250px">
          <template #default="scope">
            {{ fuWuFsOptions[scope.row.serviceMode - 1].name }}
          </template>
        </el-table-column>
        <el-table-column prop="g4" align="center" label="主要服务领域">
          <template #default="scope">
            {{ fuWuLyOptions[scope.row.serviceField - 1].name }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceObject" align="center" label="受益人群或服务对象">
        </el-table-column>
        <el-table-column prop="activityIntroduction" align="center" label="年度活动概述(社会效益、经济效益)">
        </el-table-column>
        <!-- <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="searchDetail(scope.$index)">
              查看
            </el-button>
          </template>
</el-table-column> -->
      </el-table>
    </div>
    <div>
      <TbTitle level="2" title="（二）、公益慈善活动支出" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否有支出：
        <el-radio-group v-model="radio2" disabled>
          <el-radio-button label="1">有支出</el-radio-button>
          <el-radio-button label="2">无支出</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.expenditureList" border>
        <el-table-column type="index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="examineYear" align="center" label="年度\项目"> </el-table-column>
        <el-table-column prop="upYearAssets" align="center" label="上年末净资产(人民币元)"> </el-table-column>
        <el-table-column prop="publicWelfareExpenditure" align="center" label="公益慈善事业支出(人民币元)"> </el-table-column>
        <el-table-column prop="expenditure" align="center" label="当年总支出(人民币元)" width="250px">
        </el-table-column>
        <el-table-column prop="manageExpenditure" align="center" label="管理费用支出(人民币元)">
        </el-table-column>
        <el-table-column prop="charitableProportion" align="center" label="公益慈善事业支出占上年末净资产的比例">
        </el-table-column>
        <el-table-column prop="manageProportion" align="center" label="管理费支出占当年总支出的比例">
        </el-table-column>
        <!-- <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="searchDetail(scope.$index)">
              查看
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div>
      <TbTitle level="2" title="（三）、法律法规规章中明确规定的职能" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否有规定职能：
        <el-radio-group v-model="radio3" disabled>
          <el-radio-button label="1">有规定</el-radio-button>
          <el-radio-button label="2">无规定</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.transferredList" border>
        <el-table-column type="index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="fun" align="center" label="职能"> </el-table-column>
        <el-table-column prop="basedOn" align="center" label="依据"> </el-table-column>
        <el-table-column prop="relationship" align="center" label="实施中与行政机关关系"> </el-table-column>
      </el-table>
    </div>
    <div>
      <TbTitle level="2" title="（四）、行政机关委托授权的事项" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否有委托授权事项：
        <el-radio-group v-model="radio4" disabled>
          <el-radio-button label="1">有事项</el-radio-button>
          <el-radio-button label="2">无事项</el-radio-button>
        </el-radio-group>
      </div>
      <el-table level="2" :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.entrustedList"
        border>
        <el-table-column type="index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="matter" align="center" label="职能"> </el-table-column>
        <el-table-column prop="basedOn" align="center" label="依据"> </el-table-column>
        <el-table-column prop="relationship" align="center" label="实施中与行政机关关系"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import TbTitle from '@/views/yearCheck/components/TbTitle.vue'
import { reactive, ref, inject } from 'vue'
const radio1 = ref(1)
const radio2 = ref(1)
const radio3 = ref(2)
const radio4 = ref(2)
const fuWuFsOptions = [
  { id: 1, name: '救助灾害' },
  { id: 2, name: '救济贫困' },
  { id: 3, name: '扶助残疾人' },
  { id: 4, name: '扶助某领域困难的社会群体和个人' },
  { id: 5, name: '教育' }, { id: 6, name: '科学' },
  { id: 7, name: '文化' }]

const fuWuLyOptions = [
  { id: 1, name: '资金救助' },
  { id: 2, name: '技术' }, { id: 3, name: '信息' },
  { id: 4, name: '专家人才' },
  { id: 5, name: '培训' },
  { id: 6, name: '生产销售' }]


let detailInfo = ref({})
const { getDetailInfo } = inject('getDetailInfo')

getDetailInfo(14).then(res => {
  const { publicWelfareList, expenditureList, transferredList, entrustedList } = res.data
  detailInfo.value = res.data

  radio1.value = publicWelfareList && publicWelfareList.length ? 1 : 2
  radio2.value = (expenditureList && expenditureList.length) ? 1 : 2

  radio3.value = transferredList && transferredList.length ? 1 : 2
  radio4.value = entrustedList && entrustedList.length ? 1 : 2
})

</script>
<style lang="scss" scoped>
.msg-tip {
  padding: 20px 0;
  color: #000;
  font-family: '微软雅黑';
}

table {
  border-spacing: 0px;
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  color: #000;

  thead {
    background: #f5f7fa;
    color: rgb(37, 43, 53);

    th {
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;
      height: 40px;
    }
  }

  tbody {
    td {
      height: 40px;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;

      &.td-head {
        background: #f5f7fa;
      }
    }
  }
}

.page-con {
  >div {
    margin-top: 10px;
  }
}
</style>
